<template>
	<view class="wrap">
		<block v-if="!isPayFlag">
			<block v-if="isGttPayNum == 0">
				<view class="modItem">
					<view class="modTit">商品信息</view>
					<view class="modCon spaceBet">
						<block v-if="fromPage == 'zxOrder' || fromPage == 'zxOrderDet' || fromPage == 'yyPage'">
							<!-- 咨询订单涉及所有 -->
							<view class="coverImg">
								<image class="samePar" :src="getCloudFilePath(zxsInfo.objHeadImg)" mode="aspectFill"></image>
							</view>
							<view class="modConDet">
								<view class="courseName">{{zxsInfo.objName}}咨询师</view>
								<view>咨询方式:{{zxTypeTxt}}</view>
								<view class="price">
									<text class="unit">¥</text>
									<text class="priceNum">{{zxsInfo.actMoney}}</text>
								</view>
							</view>
						</block>
						<block v-if="fromPage == 'zxTcPay' || fromPage == 'zxTcPayOrder'">
							<view class="coverImg defBg">
								<image class="samePar" :src="getCloudFilePath(zxsInfo.teaImg)" mode="aspectFill"></image>
							</view>
							<view class="modConDet">
								<view class="courseName">{{zxsInfo.tcName}}</view>
								<view class="hasFlex">
									<text>{{zxsInfo.teaName}}咨询师</text>
									<text style="margin-left: 20rpx;">咨询次数:{{zxsInfo.tcTimes}}次</text>
								</view>
								<view class="price">
									<text class="unit">¥</text>
									<text class="priceNum">{{zxsInfo.actMoney}}</text>
								</view>
							</view>
						</block>
						<block v-else-if="fromPage == 'groupOrder' || fromPage == 'gsOrderDet'">
							<!-- 团体订单/团体订单详情 -->
							<view class="coverImg">
								<image class="samePar" src="../../../static/images/groupService/ttIimg.png"></image>
							</view>
							<view class="modConDet" @tap="showGsMx">
								<view class="courseName ellip">{{zxsInfo.objName}}套餐</view>
								<view>包含{{zxsInfo.serviceNum}}个项目<text>(查看详情)</text></view>
								<view class="price">
									<text class="unit">¥</text>
									<text class="priceNum">{{zxsInfo.actMoney}}</text>
								</view>
							</view>
						</block>
						<block v-else-if="fromPage == 'cpOrder' || fromPage == 'cpOrderDet' || fromPage == 'cpDet'">
							<view class="coverImg">
								<image class="samePar" :src="zxsInfo.xlcsImg"></image>
							</view>
							<view class="modConDet">
								<view class="courseName multiEllip clamp2">{{zxsInfo.title}}</view>
								<view class="price">
									<text class="unit">¥</text>
									<text class="priceNum">{{zxsInfo.actMoney}}</text>
								</view>
							</view>
						</block>
					</view>
				</view>
				<view class="contract" v-if="zxsInfo.ogzName != '' && zxsInfo.ogzName != undefined">
					<view class="infoTit hasFlex">
						<image class="ogzImg" v-if="zxsInfo.ogzHeadImg == '' || zxsInfo.ogzHeadImg == undefined" src="../../../static/images/groupService/orgDef.png"></image>
						<image class="ogzImg" v-else :src="getCloudFilePath(zxsInfo.ogzHeadImg)"></image>
						<view>{{zxsInfo.ogzName}}</view>
					</view>
				</view>
				<block v-if="fromPage == 'zxOrder' || fromPage == 'zxOrderDet' || fromPage == 'yyPage'">
					<view class="modItem">
						<view class="modTit hasBor">咨询信息</view>
						<view class="modCon" style="margin-top: 10rpx;">
							<view class="infoItem">
								<view>咨询人</view>
								<view class="con">{{zxrList.zxrName}}</view>
							</view>
							<view class="infoItem">
								<view>联系方式</view>
								<view class="con">{{zxrList.zxrMobile}}</view>
							</view>
							<view class="infoItem">
								<view>咨询时间</view>
								<view class="con">{{zxrList.zxDate}} {{zxrList.zxClassTime}}</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else-if="fromPage == 'groupOrder' || fromPage == 'gsOrderDet'">
					<view class="modItem">
						<view class="modTit hasBor">团体信息</view>
						<view class="modCon" style="margin-top: 10rpx;">
							<view class="infoItem">
								<view>团体名称</view>
								<view class="con">{{zxsInfo.orderOgzName}}</view>
							</view>
							<view class="infoItem">
								<view>联系人</view>
								<view class="con">{{zxsInfo.orderLxr}} {{zxsInfo.orderLxrMobile}}</view>
							</view>
							<view class="infoItem">
								<view>团体人数</view>
								<view class="con">{{zxsInfo.groupAllNum}}人</view>
							</view>
						</view>
					</view>
				</block>
				<view class="modItem">
					<view class="modTit hasBor">订单信息</view>
					<view class="modCon" style="margin-top: 10rpx;">
						<template v-if="fromPage == 'zxOrder' || fromPage == 'zxOrderDet' || fromPage == 'yyPage'">
							<view class="infoItem">
								<view>订单金额</view>
								<view class="con">¥{{zxsInfo.money}}</view>
							</view>
							<view class="infoItem" v-if="zxsInfo.couponMoney > 0">
								<view>优惠券抵扣</view>
								<view class="con">¥{{zxsInfo.couponMoney}}</view>
							</view>
							<view class="infoItem" v-if="jfTag == 1 && zxsInfo.dkPrice > 0">
								<view>积分抵扣</view>
								<view class="con">¥{{zxsInfo.dkPrice}}</view>
							</view>
							<view class="infoItem">
								<view>实付金额</view>
								<view class="con">¥{{zxsInfo.actMoney}}</view>
							</view>
						</template>
						<template v-if="fromPage == 'zxTcPay' || fromPage == 'zxTcPayOrder'">
							<view class="infoItem">
								<view>订单金额</view>
								<view class="con">¥{{zxsInfo.actMoney}}</view>
							</view>
							<view class="infoItem">
								<view>实付金额</view>
								<view class="con">¥{{zxsInfo.actMoney}}</view>
							</view>
						</template>
						<view class="infoItem">
							<view>下单时间</view>
							<view class="con">{{zxsInfo.addTime}}</view>
						</view>
						<view class="infoItem">
							<view>订单编号</view>
							<view class="con">{{zxsInfo.orderNoLocal}}</view>
						</view>
					</view>
				</view>
			</block>
			<view class="modItem">
				<view class="modTit hasBor">支付方式</view>
				<view class="modCon">
					<view class="payType"
						v-for="(item,index) in payTypeList"
						:key="index"
						@tap="switchPayType(index,item.id)"
					>
						<view class="leftPayType">
							<view class="iconfont" :class="item.icon"></view>
							<view>
								{{item.name}}
							</view>
						</view>
						<view class="sel"
							:class="[payTypeIndex == index ? 'active' : '']"
						>
							<view class="iconfont icon-duihao"></view>
						</view>
					</view> 
				</view>
			</view>
			<view class="botSellPay">
				<view class="totalNum">
					<view class="hj">共计:</view>
					<view class="totalTxt">
						<view>
							<text class="unit">¥</text>
							<text class="priceNum" v-if="isGttPayNum == 0">{{zxsInfo.actMoney}}</text>
							<text class="priceNum" v-if="isGttPayNum == 1">{{gttMoney}}</text>
						</view>
					</view>
				</view>
				<button class="confirmBtn" :disabled="isDisabedFlag" @tap="goPay">{{btnTit}}</button>
			</view>
		</block>
		<block v-else>
			<view class="payRes wholeWh">
				<block v-if="callBackFlag">
					<image class="payImg" src="../../../static/images/invite/succ.png"></image>
					<template v-if="yhqType == 'common'">
						<view class="payPrice">¥{{orderCallInfo.orderMoney}}</view>
						<view class="payTit">订单支付成功</view>
						<view class="paySucSmTit">订单编号：{{orderCallInfo.orderNoLocal}}</view>
					</template>
					<template v-else-if="yhqType == 'qdq'">
						<view class="payPrice">¥0</view>
						<view class="payTit">订单支付成功</view>
					</template>
					<template v-else-if="yhqType == 'tcPay'">
						<view class="payTit">恭喜您,咨询预约成功!</view>
						<view class="paySucSmTit">本次使用套餐【{{tcName}}】次数1次</view>
						<view class="paySucSmTit greenCol">剩余次数:{{remainTimes}}次</view>
					</template>
					
					<block v-if="fromPage == 'zxTcPay'">
						<view class="paySucSmTit">请前往"我的->我的咨询套餐"中咨询预约</view>
					</block>
					<block v-if="fromPage == 'zxTcPayOrder'">
						<view class="paySucSmTit">现在可以开始咨询预约了~</view>
					</block>
					<block v-if="isGttPayNum == 0">
						<block v-if="fromPage == 'yyPage'">
							<button class="comBtn" @tap="goZxOrderDet">查看订单详情</button>
							<view class="smBack" @tap="backZxsDetInfo">返回咨询师详情</view>
						</block>
						<block v-else-if="fromPage == 'zxTcPay'">
							<button class="comBtn" @tap="goZxTcYy">前往咨询预约</button>
							<view class="smBack" @tap="backCpDet">返回咨询师详情</view>
						</block>
						<block v-else-if="fromPage == 'zxTcPayOrder'">
							<button class="comBtn" @tap="goZxTcYy">前往咨询预约</button>
							<view class="smBack" @tap="backZxOrderList">返回订单</view>
						</block>
						<block v-else-if="fromPage == 'zxTcYy'">
							<button class="comBtn" @tap="goZxOrderDet">查看订单详情</button>
							<view class="smBack" @tap="backTcYy">返回</view>
						</block>
						<block v-else-if="fromPage == 'zxOrder' || fromPage == 'groupOrder' || fromPage == 'cpOrder'">
							<button class="comBtn" @tap="goZxOrderDet">查看订单详情</button>
							<view class="smBack" @tap="backZxOrderList">返回订单列表</view>
						</block>
						<block v-else-if="fromPage == 'zxOrderDet' || fromPage == 'gsOrderDet' || fromPage == 'cpOrderDet' || fromPage == 'zysyCpDet'">
							<button class="comBtn" @tap="backZxOrderList">返回</button>
						</block>
						
					</block>
					<block v-else>
						<!-- 共同体返回至我的mine -->
						<button class="comBtn" @tap="backMine">返回</button>
					</block>
				</block>
				<block v-else-if="callBackFlag == false">
					<image class="payImg" src="../../../static/images/invite/fail.png"></image>
					<view class="failTipsBig">支付失败</view>
					<view class="failTxt">{{smFailTxt}}</view>
					<button class="comBtn" @tap="goBackFail">返回</button>
				</block>
			</view>
		</block>
		<tui-bottom-popup :show="popupShow" @close="hidePopup" :radius="radiusFlag">
			<view class="popuoView">
				<view class="popupTop">服务项目明细(共{{zxsInfo.serviceNum}}个项目)</view>
				<view class="popupConItem ellip"
					v-for="(item,index) in zxsInfo.tcList"
					:key="index"
				>{{(index+1)}}.{{item.serviceName}}</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	import { getZxOrderInfo,getOrderResult,getZxTcOrderResult } from '@/api/xlzx/index'
	import { getWxAuthCode } from '@/api/wxsign/index.js'
	import { xcxPay } from '@/api/pay'
	import getUrlCode from '@/mixins/getUrlCode.js'
	export default {
		mixins:[getUrlCode],
		data(){
			return{
				payTypeList:[
					{id:'wx',name:'微信支付',icon:'icon-weixinzhifu'}
				],
				payTypeIndex:0,
				payType:'wx',
				isPayFlag:false,
				callBackFlag:null,//true->返回200 false->返回其它code
				fromPage:'',//zxOrder zxOrderDet yyPage预约咨询师 groupOrder//团体订单 //gsOrderDet团体订单详情 //gttOrder共同体订单
				zxsInfo:[],
				zxrList:[],
				zxTypeTxt:'',
				orderId:'',
				orderCallInfo:[],
				smFailTxt:'',
				isClickFlag:true,
				popupShow:false,
				radiusFlag:true,
				isGttPayNum:-1,
				gttMoney:0,
				jfTag:-1,//有无积分抵扣标识 0 1
				yhqType:'common',
				ustId:0,//咨询套餐购买成功返回的套餐id用户咨询预约使用
				tcName:'',
				remainTimes:0,
				isDisabedFlag:false,
				code:'',
				mpUserOpenId:'',
				btnTit:'确认支付'
			}
		},
		onLoad(options){
			this.orderId = options.orderId;
			this.fromPage = options.fromPage;
			this.isGttPayNum = options.isGttPayNum == undefined ? 0 : 1;
			this.gttMoney = options.gttMoney == undefined ? 0 : options.gttMoney;
			this.code = this.getUrlCode().code;
			if(this.isGttPayNum == 0){
				if(this.fromPage == 'zxTcPay' || this.fromPage == 'zxTcPayOrder'){//咨询师咨询套餐购买
					this.loadWxAuthCode();
					this.zxsInfo = uni.getStorageSync('zxTcInfoField');
				}else if(this.fromPage == 'zxTcYy'){//咨询套餐预约 zxTcYy
					this.yhqType = 'tcPay';
					this.isPayFlag = true;
					this.callBackFlag = true;
					this.tcName = options.tcName;
					this.remainTimes = options.remainTimes;
				}else{//单次咨询预约 zxOrder zxOrderDet yyPage
					this.yhqType = options.yhqType == undefined ? 'common' : options.yhqType;
					if(this.yhqType == 'common'){//正常流程(咨询预约)
						this.jfTag = options.jfTag;
						this.loadWxAuthCode();
						this.loadOrderInfo();
					}else{//qdq //全抵券
						this.isPayFlag = true;
						this.callBackFlag = true;
					}
				}
			}
		},
		methods:{
			loadWxAuthCode(){
				let field = { code:this.code };
				this.isDisabedFlag = true;
				getWxAuthCode(field).then(res=>{
					this.isDisabedFlag = false;
					this.mpUserOpenId = res.data.datas;
				}).catch(err=>{
					this.isDisabedFlag = false;
					//console.log(err);
				})
			},
			backMine(){
				uni.navigateBack({
					delta:3
				})
			},
			//团体项目查看项目列表
			showGsMx(){
				this.popupShow = true;
			},
			hidePopup(){
				this.popupShow = false;
			},
			goPay(){
				if(this.payType == ''){
					this.util.showToast('请选择支付方式');
					return;
				}
				if(this.isClickFlag){
					this.isClickFlag = false;
					this.btnTit = '加载中...';
					let opt = 'zx';
					if(this.fromPage == 'zxTcPay' || this.fromPage == 'zxTcPayOrder'){//咨询师套餐购买
						opt = 'zxTc';
					}
					var field = { orderId:this.orderId,openId:this.mpUserOpenId,opt };
					xcxPay(field).then(resPay1=>{
						this.btnTit = '确认支付';
						var resPay = resPay1.data.datas;
						WeixinJSBridge.invoke('getBrandWCPayRequest', {
							"appId": resPay.appid, //公众号ID，由商户传入     
							"timeStamp": resPay.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": resPay.nonceStr, //随机串     
							"package": resPay.package,
							"signType": "MD5", //微信签名方式：     
							"paySign": resPay.paySign //微信签名 
						},(res)=> {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								this.getBuyOrderResult();
								// 使用以上方式判断前端返回,微信团队郑重提示：
								//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							}else if(res.err_msg == "get_brand_wcpay_request:cancel"){
								this.isClickFlag = true;//可再次点击
								this.util.showToast('您取消了支付');
							}else{
								this.util.showToast('支付未成功');
								this.isClickFlag = true;//可再次点击
							}
						});
					}).catch(err=>{
						this.btnTit = '确认支付';
						this.isClickFlag = true;//可再次点击
						this.isPayFlag = true;
						this.callBackFlag = false;
						this.smFailTxt = err.data.message;
					});
				}
			},
			getBuyOrderResult(){
				var field = { orderId:this.orderId };
				if(this.fromPage == 'zxTcPay' || this.fromPage == 'zxTcPayOrder'){//新增咨询套餐购买回调
					getZxTcOrderResult(field).then(res=>{
						this.succCallBack(res.data.datas);
					}).catch(err=>{
						this.failCallBack(err.code.message);
					})
				}else{
					getOrderResult(field).then(res=>{
						this.succCallBack(res.data.datas);
					}).catch(err=>{
						this.failCallBack(err.data.message);
					});
				}
			},
			succCallBack(resSucc){
				this.isPayFlag = true;
				this.callBackFlag = true;
				uni.setNavigationBarTitle({
					title:'付款成功'
				})
				this.orderCallInfo = resSucc;
				if(this.fromPage == 'zxTcPay' || this.fromPage == 'zxTcPayOrder'){
					this.ustId = resSucc.ustId;
				}
			},
			failCallBack(msg){
				this.isPayFlag = true;
				this.callBackFlag = false;
				this.smFailTxt = msg;
				this.isClickFlag = true;//可再次点击
			},
			switchPayType(index,id){
				this.payTypeIndex = index;
				this.payType = id;
			},
			onBackPress(options) {
				if(this.isPayFlag && this.callBackFlag){
					if(options.from == 'navigateBack'){
						return false;
					}
					if(this.fromPage == 'yyPage'){//返回咨询师详情
						this.backZxsDetInfo();
					}else if(this.fromPage == 'zxTcPay'){
						this.backCpDet();
					}else if(this.fromPage == 'zxTcYy'){
						this.backTcYy();
					}else{//从咨询订单/团体订单list进来/咨询订单详情/团体订单详情
						//if(this.fromPage == 'zxOrder' || this.fromPage == 'zxOrderDet')
						this.backZxOrderList();
					}
					return true;
				}
			},
			//跳转至我的咨询套餐订单
			goMyZxTcOrder(){
				uni.navigateTo({
					url:'/pages/subMine/zxTcOrder/zxTcOrder'
				})
			},
			//跳转我的咨询套餐咨询师预约界面
			goZxTcYy(){
				let { teaUserId,teaName } = this.zxsInfo;
				uni.navigateTo({
					url:'/pages/subIndex/zxsYy/zxsYy?zxsUserId=' + teaUserId + '&zxsName=' + teaName + '&fromPageType=zxTcType&ustId=' + this.ustId
				})
			},
			backZxOrderList(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.isRefreshFlag = true;
				uni.navigateBack({
					delta:1
				})
			},
			//咨询套餐预约返回对用的自存套餐订单详情/list页面 跳过zxsYy页面
			backTcYy(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 3];
				prevPage.$vm.isRefreshFlag = true;
				uni.navigateBack({
					delta:2
				})
			},
			//返回测评详情
			backCpDet(){
				uni.navigateBack({
					delta:1
				})
			},
			backZxsDetInfo(){
				uni.removeStorageSync('uoList');
				uni.navigateBack({
					delta:2
				})
			},
			goBackFail(){
				uni.navigateBack({
					delta:1
				})
			},
			//查看咨询订单详情
			goZxOrderDet(){
				if(this.fromPage == 'zxOrder' || this.fromPage == 'zxOrderDet' || this.fromPage == 'yyPage' || this.fromPage == 'zxTcYy'){
					uni.navigateTo({
						url:'../../subMine/zxOrderDet/zxOrderDet?orderId=' + this.orderId
					})
				}else if(this.fromPage == 'groupOrder' || this.fromPage == 'gsOrderDet'){
					uni.navigateTo({
						url:'../groupOrderDet/groupOrderDet?orderId=' + this.orderId
					})
				}
			},
			//咨询订单 团体订单详情
			loadOrderInfo(){
				uni.showLoading({title:'加载中...', mask: true });
				let field = {id:this.orderId};
				let url = '/order/getOrderDetail';
				getZxOrderInfo(field,url).then(res=>{
					let tmpRes = res.data.datas;
					this.zxsInfo = tmpRes;
					this.orderId = tmpRes.id;
					this.zxrList = tmpRes.zxrList[0];
					if(this.zxsInfo.zxType == 1){
						this.zxTypeTxt = '视频咨询';
					}else if(this.zxsInfo.zxType == 2){
						this.zxTypeTxt = '电话咨询';
					}else{
						this.zxTypeTxt = '面对面咨询';
					}
				}).catch(err=>{
					console.log(err)
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang='scss' scoped>
	.popuoView{
		position: relative;
		z-index: 10001;
		.popupTop{
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: $font-size32;
			color: $pss-text-color3;
			border-bottom: 1rpx solid #eee;
			font-weight: bold;
		}
		.popupConItem{
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 15rpx;
			font-size: $font-size28;
			color: $pss-text-color8;
			border-bottom: 1rpx solid #eee;
		}
	}
	.failTipsBig{
		font-size: 32rpx;
		font-weight: 620;
		color: #38332f;
		text-align: center;
		margin:0rpx 0 10rpx;
	}
	.failTxt{
		color: #aeaeae;
		text-align: center;
		font-size: 26rpx;
	}
	.paySucSmTit{
		font-size: $font-size28;
		color: $pss-text-color8;
		&.greenCol{
			color: $pss-color-green;
		}
	}
	.smBack{
		text-align: center;
		padding: 20rpx 0;
		font-size: $font-size26;
		color: $pss-text-color8;
	}
	.payPrice{
		font-size: 48rpx;
		font-weight: bold;
		color: $pss-color-red;
		text-align: center;
		margin-bottom: 10rpx;
	}
	.infoTit{
		/* width: 100%; */
		height: 70rpx;
		line-height: 70rpx;
		font-weight: bold;
		font-size: $font-size32;
		color: $pss-text-color3;
		padding: 20rpx;
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		.ogzImg{
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}
	}
	.payRes{
		background: #fff;
		text-align: center;
		.payImg{
			width: 162rpx;
			height: 162rpx;
			margin: 200rpx 0 30rpx;
		}
		.payTit{
			font-size: $font-size34;
			color: $pss-text-color3;
			margin-bottom: 20rpx;
			font-weight: bold;
		}
		.tips{
			font-size: $font-size28;
			color: $pss-text-color8;
		}
		.comBtn{
			width: 500rpx;
			margin:100rpx auto 0;
			background: #fff;
			border-radius: 50rpx;
			color: $pss-color-primary_1;
			border: 1rpx solid $pss-color-primary_1;
		}
	}
	.botSellPay{
		width: 100%;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 20;
		box-shadow: 0 -3rpx 5rpx rgba(0,0,0,.05);
		.totalNum{
			width: 60%;
			height: 100%;
			display: flex;
			align-items: center;
			.hj{
				margin:0 15rpx 0 30rpx;
				font-size: $font-size28;
				color: $pss-text-color3;
			}
			.totalTxt{
				font-size: 26rpx;
				color: $pss-color-red; 
				display: flex;
				flex-direction: column;
			}
			.totalTxt .unit{
				font-size: 24rpx;
				font-weight: bold;
				margin-right: 5rpx;
			}
			.totalTxt .priceNum{
				font-size: 40rpx;
				font-weight: bold;
			}
			
		}
		.confirmBtn{
			width: 300rpx;
			height: 100%;
			line-height: 100rpx;
			background:$pss-color-primary_1;
			color:#fff;
			font-size: 32rpx;
			text-align: center;
			padding: 0 20rpx;
			border-radius: 0;
			border: none;
		}
	}
	.modItem{
		padding:0 20rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 30rpx;
		.modTit{
			height: 90rpx;
			line-height: 90rpx;
			font-size: $font-size34;
			color: $pss-text-color3;
			font-weight: bold;
			&.hasBor{
				border-bottom: 1rpx solid #eee;
			}
		}
		.modCon{
			.coverImg{
				width: 140rpx;
				height: 140rpx;
				margin-right: 15rpx;
				border-radius: 15rpx;
				.samePar{
					border-radius: 15rpx;
				}
			}
			.infoItem{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 60rpx;
				font-size: $font-size28;
				color: $pss-text-colora;
				.con{
					color: $pss-text-color3;
				}
			}
			.modConDet{
				width: 78%;
				min-height: 140rpx;
				color: $pss-text-colora;
				font-size: $font-size26;
				.courseName{
					font-size: $font-size32;
					font-weight: bold;
					color: $pss-text-color3;
					margin-bottom: 10rpx;
				}
				.price{
					color: $pss-color-red;
					font-size: 46rpx;
					font-weight: bold;
					.unit{
						margin-right:5rpx;
						font-size: $font-size26;
						font-weight: normal;
					}
				}
			}
			.payType{
				height: 100rpx;
				line-height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: $pss-text-color3;
				/* border-bottom: 1rpx solid #eee; */
				.price{
					color: $pss-color-red;
					font-size: 40rpx;
					font-weight: bold;
					text{
						font-size: 28rpx;
					}
				}
				.leftPayType{
					view{
						float: left;
						&:last-child{
							font-size: 28rpx;
							color: $pss-text-color3;
							margin-left: 15rpx;
						}
						text{
							font-size: 24rpx;
							color: $pss-text-colora;
							margin-left: 10rpx;
						}
					}
					.icon-weixinzhifu{
						color:#48b816 ;
						font-size: 52rpx;
					}
					.icon-zhifubao{
						color: #007ee9;
						font-size: 42rpx;
					}
					.icon-yuezhifu{
						color: #ffa510;
						font-size: 42rpx;
					}
					.icon-jifendikou{
						color: #00c496;
						font-size: 42rpx;
					}
				}
				.sel{
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					position: relative;
					margin-top: 21rpx;
					border:1rpx solid #eeeeee;
					view{
						position: absolute;
						right: 0;
						top: -36rpx;
						font-size: 28rpx;
						color: #fff;
					}
					&.active{
						background: $pss-color-primary;
						border:1rpx solid $pss-color-primary;
						color: #fff;
					}
				}
			}
		}
	}
	.wrap{
		padding: 20rpx 30rpx 120rpx;
	}
</style>